/// <reference path="../types/sgs/index.d.ts"/>

import systemConfig from '@/config/system.config'
import * as React from 'react'
import card from './api/card'
import { Card } from './modules/Card/card'
import { AppState } from './store'

export class App extends React.Component<Partial<AppState>, stateOptions> {

    protected set pvcDesDom(value: pvcDesDom) {
        if (!value) return
        systemConfig.setStart({
            designWidthPx: value.offsetWidth,
            designHeighthPx: value.offsetHeight
        })
    }

    constructor(props: AppState) {
        super(props)

        this.state = {
            cardList: []
        }

        this.getCardList()

    }

    async getCardList() {
        let res = await card.getCardsList()
        res = new Array(res[0])
        this.setState({ cardList: res })
    }

    render() {
        return (
            <div className='test' ref={(dom) => { this.pvcDesDom = dom }} >
                <h1>Hello World! My name is liukesen.</h1>
                {
                    this.state.cardList.map(el => <Card key={el.id} card={el} />)
                }
            </div>
        )
    }
}

type pvcDesDom = HTMLDivElement | null

type stateOptions = {
    cardList: sanguosha.request['cardsGetCards']['resolve']
}